<template>
  <div class="main-box">
    <div class="big_title">{{ title }}</div>
    <div class="top_user">
      <div class="user_logo">
        <img class="img_logo" :src="default_head" alt="" v-if="imgUrl != ''" />
      </div>
      <div class="user_name"><span>叫啥</span></div>
    </div>
    <div class="short_cont">
      {{ main }}
    </div>
    <img class="font_img" :src="default_head" alt="" v-if="imgUrl != null" />
    <div class="big_like_btn" @click="addpraise">
      <Icon type="ios-thumbs-up" size="32" class="icon_tum" />
      <span class="praise">赞一下</span>
    </div>
    <div class="support_list">
      <div class="user_logos">
        <span href="" class="logos_box" v-for="item in likedata">
          <img
            class="logos_box_img_like"
            :src="item.head"
            alt=""
            v-if="item.head"
          />
          <img class="logos_box_img_like" :src="default_head" alt="" />
        </span>
      </div>
      <div class="like_num">
        <span>{{ like_num }}</span>
        赞
        <Icon type="md-arrow-dropright" />
      </div>
    </div>
    <div class="common-comment">
      <h2 class="h3_box">
        <span>{{ comment_num }}</span>
        条评论
      </h2>
    </div>
    <div class="common-comment-box">
      <div class="clearfloat">
        <div class="common-box-left">
          <div class="avater">
            <img class="common-box-right-img" :src="default_head" alt="" />
          </div>
        </div>
        <div class="common-box-right">
          <div class="comment-textarea-wrap">
            <textarea
              class="comment-textarea"
              placeholder="请先登录后发表评论"
              v-model="comment"
              v-if=""
            ></textarea>
            <textarea
              class="comment-textarea"
              placeholder="愉快的畅所欲言吧~"
              v-model="comment"
              v-if="loginSuccess == true"
            ></textarea>
          </div>
          <div class="common-comment-bar">
            <div class="bar-right">
              <div class="comment-submit" @click="sendCommentMsg">发表</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ul class="comment-lists">
      <li class="comment-list" v-for="item in commentData">
        <div class="top-left">
          <div class="avater-box">
            <div class="avater">
              <em href="" class="logos_box">
                <img
                  class="logos_box_img_like"
                  :src="item.head"
                  alt=""
                  v-if="item.head != null"
                />
                <img :src="imgUrl" alt="" />
                <img class="logos_box_img_like" :src="default_head" alt="" />
              </em>
            </div>
          </div>
          <div class="user-info">
            <p class="nickname">{{ item.nickname }}</p>
            <p class="time">{{ item.sc_time }}</p>
          </div>
        </div>
        <div class="comment-txt">{{ item.s_comment_main }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import { default_head } from "common/config.js";
import { mapGetters } from "vuex";
import { getOneMessage } from "server/commuity.js";
import { sendLikeuser } from "server/commuity.js";
import { sendComentUser } from "server/commuity.js";
import { getusermessage } from "server/commuity.js";
export default {
  name: "Details",
  data() {
    return {
      // 点赞数
      like_num: 0,
      // 评论框内容
      comment: "",
      // id
      Sid: "",
      // 标题
      title: "默认标题",
      // 评论数
      comment_num: 0,
      // 主题
      main: "this is main",
      // 主图
      // 点赞的用户data
      likedata: [],
      // 评论数组
      commentData: [],
      // default_head 公用头像
      default_head,
    };
  },
  methods: {
    sendCommentMsg() {
      let _this = this;
      if (this.loginSuccess() == false) {
        this.$Message["error"]({
          background: true,
          content: "请登录后再评论！",
        });
      } else {
        if (_this.comment == "") {
          this.$Message["error"]({
            background: true,
            content: "您暂未添加评论内容！",
          });
        } else {
          let token = window.localStorage.getItem("front_token");
          getusermessage(token).then(function(userData) {
            let nowtime = _this.curentTime();
            let NCobj = {
              userId: userData.uid,
              nickname: userData.nickname,
              sc_time: nowtime,
              s_comment_main: _this.comment,
              sid: _this.Sid,
            };
            // 先渲染
            _this.commentData.push(NCobj);
            _this.$Message["success"]({
              background: true,
              content: "发表成功",
            });
            // 添加功能
            sendComentUser(NCobj).then(function(res) {});
            _this.comment_num = _this.comment_num + 1;
          });
        }
      }
    },
    addpraise() {
      let _this = this;
      if (this.loginSuccess() == false) {
        this.$Message["error"]({
          background: true,
          content: "请登录后再点赞！",
        });
      } else {
        let token = window.localStorage.getItem("front_token");
        getusermessage(token).then(function(userData) {
          let flag = 0;
          for (let i = 0; i < _this.likedata.length; i++) {
            if (userData.uid == _this.likedata[i].uid) {
              flag = 1;
              break;
            }
          }
          if (flag == 1) {
            _this.$Message["error"]({
              background: true,
              content: "您已经点过赞无法再点！",
            });
          } else {
            // 先行渲染
            _this.likedata.push(userData);
            _this.like_num = _this.like_num + 1;
            let likeData = {
              userid: userData.uid,
              storyId: _this.Sid,
            };
            // // 发送请求
            sendLikeuser(likeData).then(function(res) {
              _this.$Message[res.err_code]({
                background: true,
                content: res.message,
              });
            });
          }
        });
      }
    },
    curentTime() {
      var now = new Date();

      var year = now.getFullYear(); //年
      var month = now.getMonth() + 1; //月
      var day = now.getDate(); //日

      var hh = now.getHours(); //时
      var mm = now.getMinutes(); //分
      var ss = now.getSeconds(); //分

      var clock = year + "-";

      if (month < 10) clock += "0";

      clock += month + "-";

      if (day < 10) clock += "0";

      clock += day + " ";

      if (hh < 10) clock += "0";

      clock += hh + ":";
      if (mm < 10) clock += "0";
      clock += mm + ":";

      if (ss < 10) clock += "0";
      clock += ss;
      return clock;
    },
    loginSuccess() {
      return this.getIsLogin;
    },
  },
  // 渲染表格生命周期
  beforeCreate() {
    let nowid = this.$route.query.storId;
    let SendData = {
      id: nowid,
    };
    let _this = this;
    getOneMessage(SendData).then(function(res) {

      _this.title = res.data.Story[0].s_title;
      _this.main = res.data.Story[0].s_main;
      _this.imgUrl = res.data.Story[0].s_img;
      _this.likedata = res.data.Like;
      _this.commentData = res.data.Conmen;
      _this.comment_num = _this.commentData.length;
      _this.like_num = _this.likedata.length;
      _this.Sid = res.data.Story[0].s_id;
    });
  },
  computed: {
    ...mapGetters(["getIsLogin", "getUserData"]),
  },
};
</script>

<style scoped>
.logos_box_img_like {
  width: 100%;
  height: 100%;
}
.clearfloat {
  width: 100%;
  height: 240px;
}
.comment-txt {
  font-size: 16px;
  line-height: 1.75;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
  margin: 14px 0 14px 50px;
}
.avater-box {
  float: left;
}
.nickname {
  height: 16px;
  line-height: 16px;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}
.main-box {
  max-width: 690px;
  margin: 0 auto;
  width: 690px;
  height: auto;
}
.big_title {
  color: #222c37;
  font-size: 34px;
  line-height: 51px;
  padding: 32px 0 12px 0;
  font-weight: 700;
}
.top_user {
  width: 100%;
  height: 40px;
  overflow: hidden;
}
.user_logo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: solid 1px #dee0e1;
}
.img_logo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: solid 1px #dee0e1;
  float: left;
}
.user_name {
  float: left;
  height: 100%;
  font-size: 16px;
  line-height: 40px;
}
.short_cont {
  padding: 34px 0;
  font-size: 16px;
  line-height: 28px;
  color: #222c37;
  word-wrap: break-word;
}
.big_like_btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: solid 2px #7a8087;
  background: #fff;
  text-align: center;
  margin: 0 auto;
  position: relative;
  margin-bottom: 60px;
  cursor: pointer;
}
.font_img {
  width: 690px;
  overflow: hidden;
  height: auto;
  margin-bottom: 40px;
}
.icon_tum {
  font-size: 32px;
  margin-top: 10px;
}
.praise {
  position: absolute;
  font-size: 14px;
  line-height: 14px;
  color: #222c37;
  min-width: 43px;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
}
.support_list {
  padding: 20px;
  box-sizing: border-box;
  width: 690px;
  background: #f8f8f9;
  overflow: hidden;
  margin-bottom: 60px;
}
.user_logos {
  float: left;
  max-width: 400px;
  /* height: 40px; */
  overflow: hidden;
  padding-right: 8px;
}
.logos_box {
  display: block;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border: 3px solid #f8f8f9;
  border-radius: 50%;
  float: left;
  overflow: hidden;
  margin-right: -8px;
  cursor: pointer;
}
.like_num {
  float: right;
  font-size: 16px;
  color: #425eb2;
  line-height: 40px;
  cursor: pointer;
  font-family: "Helvetica Neue";
}
.common-comment {
  margin-top: 40px;
}
.h3_box {
  position: relative;
  line-height: 62px;
  padding: 0;
  font-size: 24px;
  color: #222c37;
  font-weight: bold;
  padding-bottom: 20px;
  border-bottom: solid 1px #dee0e1;
}
.common-comment-box {
  margin-top: 39px;
  /* border-bottom: 1px solid #dee0e1; */
}
.common-box-left {
  width: 40px;
  min-height: 100px;
  margin-right: 10px;
  float: left;
}
.avater {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.common-box-right-img {
  width: 100%;
  height: 100%;
}
.comment-textarea-wrap {
  width: 618px;
  height: 118px;
  min-height: 118px;
  padding: 10px;
  border: 1px solid #dee0e1;
}
.common-box-right {
  float: left;
}
.comment-textarea {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 16px;
  resize: none;
  outline: none;
  color: #222c37;
  border: 0;
}
.common-comment-bar {
  height: 40px;
  line-height: 40px;
  margin: 20px 0 40px;
  font-size: 16px;
  color: #7a8087;
}
.bar-right {
  float: right;
}
.comment-submit {
  width: 120px;
  height: 40px;
  float: left;
  margin-left: 19px;
  background: #d81e06;
  text-align: center;
  color: #fff;
}
.comment-lists {
  list-style: none;
  margin-bottom: 60px;
}
.comment-list {
  margin-bottom: 20px;
}
.top-left {
  /* float: left; */
  height: 40px;
}
.user-info {
  float: left;
  margin-top: 4px;
  margin-left: 9px;
}
</style>
